<template>
  <div class="on-line">
    <div style="flex: 1">
      <div class="row top">
        <item-card color="#fff">
          <img src="@/assets/index/icon_日最大需求量.png" alt />
          <span style="font-size: 16px">日最大需</span>
          <span style="margin-right: 24px; font-size: 18px;">
            <span style="color: #308AE7">{{ online.maxNdHedDay || 0 }}</span> kW
          </span>
        </item-card>
        <spliter width="50" />
        <item-card color="#fff">
          <img src="@/assets/index/icon_月最大需求量.png" alt />
          <span style="font-size: 16px">月最大需</span>
          <span style="margin-right: 24px; font-size: 18px;">
            <span style="color: #308AE7">{{ online.maxNdHedMonth || 0 }}</span> kW
          </span>
        </item-card>
      </div>
      <div class="echarts">
        <el-radio-group v-model="echartsType" size="mini" @change="typeChange">
          <el-radio-button label="折线图"></el-radio-button>
          <el-radio-button label="柱状图"></el-radio-button>
        </el-radio-group>
        <div id="echarts-4-1"></div>
        <div class="echarts-row">
          <div class="item">
            <div id="echarts-4-2"></div>
            <div class="label">
              <div>{{ online.maxLoad }}</div>
              <div>{{ '实时负荷(kW)' }}</div>
            </div>
          </div>
          <div class="item">
            <div id="echarts-4-3"></div>
            <div class="label">
              <div>{{ online.dayMaxLoad || 0 }}</div>
              <div>{{ '日最大负荷(kW)' }}</div>
            </div>
          </div>
          <div class="item">
            <div id="echarts-4-4"></div>
            <div class="label">
              <div>{{ online.monthMaxLoad || 0 }}</div>
              <div>{{ '月最大负荷(kW)' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="row">
        <alarm-item
          :img="require('@/assets/index/icon_月告警数量.png')"
          label="本月告警数量"
          :value="online.countWarn || 0"
        ></alarm-item>
        <alarm-item
          :img="require('@/assets/index/icon_异常告警数量.png')"
          label="异常告警数量"
          :value="online.countAbnormal || 0"
        ></alarm-item>
        <alarm-item
          :img="require('@/assets/index/icon_事故跳闸数量.png')"
          label="事故跳闸数量"
          :value="online.countFault || 0"
        ></alarm-item>
      </div>
      <div class="row">
        <alarm-item
          :img="require('@/assets/index/icon_越限告警数量.png')"
          label="越限告警数量"
          :value="online.countLimit || 0"
        ></alarm-item>
        <alarm-item
          :img="require('@/assets/index/icon_通信故障数量.png')"
          label="通信故障数量"
          :value="online.countComm || 0"
        ></alarm-item>
        <spliter width="200" />
      </div>
    </div>
  </div>
</template>

<script>
import ItemCard from "../ItemCard";
import Spliter from "@/components/Spliter";
import AlarmItem from "./AlarmItem";
import echarts from "echarts";
import { legend } from "@/utils/echarts";
export default {
  components: {
    ItemCard,
    Spliter,
    AlarmItem
  },
  props: {
    online: {
      type: Object,
      default: null
    },
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      echartsType: "折线图",
      echarts1: null,
      echarts2: null,
      echarts3: null,
      echarts4: null
    };
  },
  mounted() {
    this.echarts1 = echarts.init(document.getElementById("echarts-4-1"));
    this.echarts2 = echarts.init(document.getElementById("echarts-4-2"));
    this.echarts3 = echarts.init(document.getElementById("echarts-4-3"));
    this.echarts4 = echarts.init(document.getElementById("echarts-4-4"));
    this.setOption1();
    this.setOption2();
    this.setOption3();
    this.setOption4();
  },
  methods: {
    setOption1() {
      let option = null;
      const xData = this.online.headers;
      const grid = {
        top: 30,
        bottom: 5,
        left: 20,
        right: 20,
        containLabel: true
      };
      const xAxis = {
        type: "category",
        data: xData,
        axisTick: {
          show: false
        }
      };
      const color = ["#308AE7", "#FF66B7"];
      const yAxis = {
        type: "value",
        name: "负荷值：( kW )",
        axisTick: {
          show: false
        },
        nameTextStyle: {
          align: "left"
        }
      };
      if (this.echartsType === "折线图") {
        option = {
          color,
          grid,
          xAxis,
          yAxis,
          legend,
          tooltip: {
            trigger: "axis"
          },
          series: [
            {
              data: this.online.data1,
              name: "今日",
              type: "line",
              smooth: true
            },
            {
              data: this.online.data2,
              name: "昨日",
              type: "line",
              smooth: true
            }
          ]
        };
      } else {
        option = {
          color,
          grid,
          legend,
          xAxis,
          yAxis,
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          series: [
            {
              data: this.online.data1,
              name: "今日",
              type: "bar",
              barWidth: 10,
              barGap: 0
            },
            {
              data: this.online.data2,
              name: "昨日",
              type: "bar",
              barWidth: 10,
              barGap: 0
            }
          ]
        };
      }
      this.echarts1.setOption(option, true);
    },
    setOption2() {
      let value = 0;
      if (this.info.loadcapacity !== 0 && !isNaN(this.info.loadcapacity)) {
        value = ((this.online.maxLoad || 0) * 100) / this.info.loadcapacity;
        value = Math.round(value * 100) / 100;
      }
      const numbers = {
        max: 150,
        value: 150
      };
      const axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#308AE7"
        },
        {
          offset: 1,
          color: "#FF66B7"
        }
      ]);
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          show: false,
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            radius: "90%",
            pointer: {
              width: 4
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [
                  [numbers.value / numbers.max, axislineColor],
                  [1, "#bbb"]
                ]
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: { formatter: "{value}%", fontSize: 12 },
            data: [{ value: value }]
          }
        ]
      };
      this.echarts2.setOption(option);
    },
    setOption3() {
      let value = 0;
      if (this.info.loadcapacity !== 0 && !isNaN(this.info.loadcapacity)) {
        value = ((this.online.dayMaxLoad || 0) * 100) / this.info.loadcapacity;
        value = Math.round(value * 100) / 100;
      }
      const numbers = {
        max: 150,
        value: 150
      };
      const axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#308AE7"
        },
        {
          offset: 1,
          color: "#FF66B7"
        }
      ]);
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          show: false,
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            radius: "90%",
            pointer: {
              width: 4
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [
                  [numbers.value / numbers.max, axislineColor],
                  [1, "#bbb"]
                ]
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: { formatter: "{value}%", fontSize: 12 },
            data: [{ value: value }]
          }
        ]
      };
      this.echarts3.setOption(option);
    },
    setOption4() {
      let value = 0;
      if (this.info.loadcapacity !== 0 && !isNaN(this.info.loadcapacity)) {
        value =
          ((this.online.monthMaxLoad || 0) * 100) / this.info.loadcapacity;
        value = Math.round(value * 100) / 100;
      }
      const numbers = {
        max: 150,
        value: 150
      };
      const axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#308AE7"
        },
        {
          offset: 1,
          color: "#FF66B7"
        }
      ]);
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          show: false,
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            radius: "90%",
            pointer: {
              width: 4
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [
                  [numbers.value / numbers.max, axislineColor],
                  [1, "#bbb"]
                ]
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: { formatter: "{value}%", fontSize: 12 },
            data: [{ value: value }]
          }
        ]
      };
      this.echarts4.setOption(option);
    },
    typeChange() {
      this.setOption1();
    }
  }
};
</script>

<style lang="scss" scoped>
.on-line {
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.top {
  margin-bottom: 8px;
  .item-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.echarts {
  /deep/ .el-radio-group {
    .el-radio-button:first-child .el-radio-button__inner {
      border-radius: 14px 0 0 14px;
      border-color: #e6e6e6;
    }
    .el-radio-button:last-child .el-radio-button__inner {
      border-radius: 0 14px 14px 0;
      border-color: #e6e6e6;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #e6e6e6;
      color: #308ae7;
      box-shadow: 0 0 0 0;
    }
  }

  #echarts-4-1 {
    height: 100px;
    margin-top: 8px;
  }
  .echarts-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    text-align: center;
    .item {
      width: 150px;
      .label {
        margin-top: -20px;
      }
    }
  }
  #echarts-4-2,
  #echarts-4-3,
  #echarts-4-4 {
    height: 100px;
    overflow: hidden;
  }
}
.bottom {
  border-top: 1px solid #e6eaee;
  line-height: 1.4;
  padding: 10px;
  margin: 10px -10px -10px;
  .row {
    margin: 0;
  }
}
</style>
